<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>

<!DOCTYPE html>
<html lang="en" data-theme="dark">
<%-- head --%>
<jsp:include page="../../include/common/header/page_header.jsp"/>

<body class="min-h-screen bg-base-300">
<%--Navbar--%>
<jsp:include page="/include/common/header/web_header.jsp"/>
<!-- Main Content -->
<div class="container mx-auto px-4">
    <!-- Hero Carousel -->
    <div class="carousel w-full rounded-box my-4 h-[400px] overflow-hidden">
        <div id="slide1" class="carousel-item relative w-full">
            <img src="https://obs.gduamoe.com/upload/banner/20241208-1/9e0e0d07ec38b68740855fe575a0d373.png?x-image-process=image/quality,q_65/format,webp"
                 class="w-full object-cover"/>
            <div class="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent">
                <div class="absolute bottom-0 left-0 p-8">
                    <h2 class="text-3xl font-bold text-white mb-2">清明上河图密码</h2>
                    <p class="text-white/80">更新至20集</p>
                </div>
            </div>
            <div class="absolute flex justify-between transform -translate-y-1/2 left-5 right-5 top-1/2">
                <a href="#slide4" class="btn btn-circle">❮</a>
                <a href="#slide2" class="btn btn-circle">❯</a>
            </div>
        </div>
        <div id="slide2" class="carousel-item relative w-full">
            <img src="https://obs.gduamoe.com/upload/banner/20241211-1/73ded3fda3679a565fff550da62ad74f.png?x-image-process=image/quality,q_65/format,webp"
                 class="w-full object-cover"/>
            <div class="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent">
                <div class="absolute bottom-0 left-0 p-8">
                    <h2 class="text-3xl font-bold text-white mb-2">猎罪图鉴2</h2>
                    <p class="text-white/80">全新上线</p>
                </div>
            </div>
            <div class="absolute flex justify-between transform -translate-y-1/2 left-5 right-5 top-1/2">
                <a href="#slide1" class="btn btn-circle">❮</a>
                <a href="#slide3" class="btn btn-circle">❯</a>
            </div>
        </div>
    </div>

    <!-- Admin's Recommendations -->
    <div class="my-8">
        <div class="flex justify-between items-center mb-4">
            <h2 class="text-2xl font-bold flex items-center gap-2">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-yellow-500" fill="none" viewBox="0 0 24 24"
                     stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                          d="M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z"></path>
                </svg>
                站长推荐
            </h2>
            <a href="#" class="btn btn-ghost btn-sm">更多 ></a>
        </div>
        <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 gap-4">
            <div class="card bg-base-100 shadow-xl">
                <figure class="relative pt-[140%]">
                    <img src="https://obs.gduamoe.com/upload/banner/20241225-1/ebf733d174c89eb101bee031ff6a4668.png?x-image-process=image/quality,q_65/format,webp"
                         alt="Recommendation" class="absolute inset-0 w-full h-full object-cover"/>
                    <div class="absolute top-0 right-0 m-2 badge badge-warning">推荐</div>
                </figure>
                <div class="card-body p-2">
                    <h3 class="card-title text-sm">三体</h3>
                    <p class="text-xs text-gray-400">科幻/悬疑</p>
                    <div class="flex items-center mt-1">
                        <div class="rating rating-sm">
                            <input type="radio" name="rating-1" class="mask mask-star-2 bg-orange-400" checked/>
                            <input type="radio" name="rating-1" class="mask mask-star-2 bg-orange-400" checked/>
                            <input type="radio" name="rating-1" class="mask mask-star-2 bg-orange-400" checked/>
                            <input type="radio" name="rating-1" class="mask mask-star-2 bg-orange-400" checked/>
                            <input type="radio" name="rating-1" class="mask mask-star-2 bg-orange-400"/>
                        </div>
                        <span class="text-xs text-gray-400 ml-1">9.2</span>
                    </div>
                </div>
            </div>
            <!-- More recommendation cards... -->
        </div>
    </div>

    <!-- Latest Movies -->
    <div class="my-8">
        <div class="flex justify-between items-center mb-4">
            <h2 class="text-2xl font-bold">最新电影</h2>
            <a href="#" class="btn btn-ghost btn-sm">更多 ></a>
        </div>
        <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 gap-4">
            <div class="card bg-base-100 shadow-xl">
                <figure class="relative pt-[140%]">
                    <img src="/placeholder.svg" alt="Movie" class="absolute inset-0 w-full h-full object-cover"/>
                    <div class="absolute top-0 right-0 m-2 badge badge-primary">HD</div>
                </figure>
                <div class="card-body p-2">
                    <h3 class="card-title text-sm">流浪地球3</h3>
                    <p class="text-xs text-gray-400">科幻/冒险</p>
                </div>
            </div>
            <!-- More movie cards... -->
        </div>
    </div>

    <!-- Latest TV Shows -->
    <div class="my-8">
        <div class="flex justify-between items-center mb-4">
            <h2 class="text-2xl font-bold">最新电视剧</h2>
            <a href="#" class="btn btn-ghost btn-sm">更多 ></a>
        </div>
        <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 gap-4">
            <div class="card bg-base-100 shadow-xl">
                <figure class="relative pt-[140%]">
                    <img src="/placeholder.svg" alt="TV Show" class="absolute inset-0 w-full h-full object-cover"/>
                    <div class="absolute top-0 right-0 m-2 badge badge-secondary">更新至36集</div>
                </figure>
                <div class="card-body p-2">
                    <h3 class="card-title text-sm">清明上河图密码</h3>
                    <p class="text-xs text-gray-400">悬疑/古装</p>
                </div>
            </div>
            <!-- More TV show cards... -->
        </div>
    </div>

    <!-- Latest Anime -->
    <div class="my-8">
        <div class="flex justify-between items-center mb-4">
            <h2 class="text-2xl font-bold">最新动漫</h2>
            <a href="#" class="btn btn-ghost btn-sm">更多 ></a>
        </div>
        <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 gap-4">
            <div class="card bg-base-100 shadow-xl">
                <figure class="relative pt-[140%]">
                    <img src="/placeholder.svg" alt="Anime" class="absolute inset-0 w-full h-full object-cover"/>
                    <div class="absolute top-0 right-0 m-2 badge badge-accent">更新至12集</div>
                </figure>
                <div class="card-body p-2">
                    <h3 class="card-title text-sm">咒术回战 第二季</h3>
                    <p class="text-xs text-gray-400">动作/奇幻</p>
                </div>
            </div>
            <!-- More anime cards... -->
        </div>
    </div>
</div>

<%--Footer--%>
<jsp:include page="/include/common/footer/footer_bar.jsp"/>
<%--Theme controller--%>
<jsp:include page="/include/common/display/hover_theme_controller.jsp"/>
</body>
</html>